.#{$ns}TreeControl {
    border: 1px solid $Form-input-borderColor;
    padding: 6px 12px;
    border-radius: 2px;
    max-height: 300px;
    overflow: auto;

    &.h-full {
        max-height: none;
        overflow: visible;
    }

    &.no-border {
        border: 0;
    }
}

.#{$ns}Tree {

    &-list,
    &-sublist {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    &-sublist.is-folded {
        display: none;
    }

    &-item {
        line-height: $Tree-itemHeight;
        position: relative;

        >div {
            &:hover {
                text-decoration: none;

                >.#{$ns}Tree-item-icons {
                    visibility: visible;
                }
            }

            >span>svg {
                display: inline-block;
                cursor: pointer;
                position: relative;
                top: 2px;
                width: px2rem(16px);
                height: px2rem(16px);
                margin-left: px2rem(5px);
            }
        }
    }

    &-rootItem {
        line-height: $Tree-itemHeight;
    }

    &-item>div:hover>.#{$ns}Tree-item-icons,
    &-rootItem>div:hover>.#{$ns}Tree-item-icons {
        visibility: visible;
    }

    &-itemLabel {
        &:hover {
            background: $Tree-item-onHover-bg;
        }
    }

    &-item-icons {
        visibility: hidden;
        transition: visibility .1s ease;
        display: inline-block;
        vertical-align: top;
        height: $Tree-itemHeight;
        line-height: $Tree-itemHeight;

        >a {
            display: inline-block;
            vertical-align: middle;
            margin-left: $gap-xs;
            cursor: pointer;

            >svg {
                $svgSize: px2rem(16px);
                width: $svgSize;
                height: $svgSize;
                top: 0.125 * $svgSize;
            }
        }
    }

    &-itemInput {
        padding-left: $Tree-itemArrowWidth;

        >a {
            display: inline-block;
            cursor: pointer;
            margin-left: $gap-sm;
            color: $icon-color;

            &:hover {
                color: $icon-onHover-color;
                text-decoration: none;
            }
        }

        >input {
            outline: none;
            background-color: $Form-input-bg;
            border: $Form-input-borderWidth solid $Form-input-borderColor;
            border-radius: $Form-input-borderRadius;
            line-height: $Form-input-lineHeight;
            padding: ($Tree-inputHeight - $Form-input-lineHeight * $Form-input-fontSize - px2rem(2px))/2 $Form-input-paddingX;
            font-size: $Form-input-fontSize;

            &::placeholder {
                color: $Form-input-placeholderColor;
                user-select: none;
            }

            &:focus {
                border-color: $Form-input-onFocused-borderColor;
                box-shadow: $Form-input-boxShadow;

                @if $Form-input-onFocused-bg !=$Form-input-bg {
                    background-color: $Form-input-onFocused-bg;
                }
            }
        }
    }

    &-addTopBtn {
        cursor: pointer;
        height: $Tree-itemHeight;
        line-height: $Tree-itemHeight;
        display: block;

        &:hover {
            text-decoration: none;
        }

        &.is-disabled {
            pointer-events: none;
            color: $text--muted-color;
        }

        >svg {
            $svgSize: px2rem(14px);
            width: $svgSize;
            height: $svgSize;
            top: $svgSize * 0.125;
            margin-right: $Tree-itemArrowWidth - px2rem(14px); // icon 的宽度是14px
        }
    }

    &-itemArrow {
        cursor: pointer;
        width: $Tree-itemArrowWidth;
        text-align: center;
        display: inline-block;

        &:before {
            font-style: normal;
            font-family: $Tree-arrowVendor;
            content: $Tree-unfoldedArrowContent;
        }

        &.is-folded:before {
            content: $Tree-foldedArrowContent;
        }
    }

    &-itemArrowPlaceholder {
        display: inline-block;
        width: $Tree-itemArrowWidth;
    }

    &-itemIcon {
        display: inline-block;
        margin-right: px2rem(3px);
    }

    &-rootIcon {
        &:before {
            font-style: normal;
            font-family: $Tree-rootIconVendor;
            content: $Tree-rootIconContent;
        }
    }

    &-leafIcon {
        &:before {
            font-style: normal;
            font-family: $Tree-leafIconVendor;
            content: $Tree-leafIconContent;
        }
    }

    &-folderIcon {
        &:before {
            font-style: normal;
            font-family: $Tree-folderIconVendor;
            content: $Tree-folderIconContent;
        }
    }

    &-itemLabel {
        user-select: none;

        &.is-checked,
        &.is-children-checked {
            color: $Tree-itemLabel--onChecked-color;
        }

        &.is-disabled {
            color: $text--muted-color;
        }
    }

    &-itemText {
        cursor: pointer;
    }

    &-placeholder {
        color: $text--muted-color;
    }



    &-item &-item>&-itemLabel,
    &-item &-item>&-placeholder {
        padding-left: $Tree-indent;
    }

    &-item &-item &-item>&-itemLabel,
    &-item &-item &-item>&-placeholder {
        padding-left: $Tree-indent * 2;
    }

    &-item &-item &-item &-item>&-itemLabel {
        padding-left: $Tree-indent * 3;
    }

    &-item &-item &-item &-item &-item>&-itemLabel {
        padding-left: $Tree-indent * 4;
    }

    &-item &-item &-item &-item &-item &-item>&-itemLabel {
        padding-left: $Tree-indent * 5;
    }

    &-item &-item &-item &-item &-item &-item &-item>&-itemLabel {
        padding-left: $Tree-indent * 6;
    }

    &-item &-item &-item &-item &-item &-item &-item &-item>&-itemLabel {
        padding-left: $Tree-indent * 7;
    }

    &-item &-item &-item &-item &-item &-item &-item &-item &-item>&-itemLabel {
        padding-left: $Tree-indent * 8;
    }

    &-item &-item &-item &-item &-item &-item &-item &-item &-item &-item>&-itemLabel {
        padding-left: $Tree-indent * 9;
    }

    &-item &-item &-item &-item &-item &-item &-item &-item &-item &-item &-item>&-itemLabel {
        padding-left: $Tree-indent * 10;
    }
}